<template>
	<zero-custom-bar :effect="false" color="#fff" title='车搭档'
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)"> </zero-custom-bar>
	<view class="user" @click="bindEditUser">
		<template>
			<image src="/static/logo.png" mode=""></image>
			<view class="" v-if="isLogin">
				<text>{{userData.name}}</text>
				<image src="/static/edit-white.png" mode=""></image>
			</view>
			<button v-else class="btn">授权登录</button>
		</template>
	</view>

	<view class="order">
		<view class="header">
			<text>我的订单</text>
			<!-- <image src="../../static/right.png" mode=""></image> -->
		</view>
		<view class="list">
			<view class="item"  @click="bindOrder('header-1')">
				<image src="../../static/m1.png" mode=""></image>
				<text>待付款</text>
			</view>
			<view class="item"  @click="bindOrder('header-2')">
				<image src="../../static/m2.png" mode=""></image>
				<text>待使用</text>
			</view>
			<!-- <view class="item"  @click="bindOrder('header-3')">
				<image src="../../static/m3.png" mode=""></image>
				<text>待评价</text>
			</view> -->
			<view class="item"  @click="bindOrder('header-4')">
				<image src="../../static/m4.png" mode=""></image>
				<text>已完成</text>
			</view>
		</view>
	</view>
	<image src="/static/sqk.png" @click="bindSqktc" class="sqk" mode=""></image>
	<view class="order">
		<view class="header">
			<text>全部功能</text>
			<!-- <image src="../../static/right.png" mode=""></image> -->
		</view>
		<view class="list">
			<view class="item" @click="bindCoupon">
				<image src="../../static/m5.png" mode=""></image>
				<text>卡券包</text>
			</view>
			<view class="item" @click="bindButler">
				<image src="../../static/m6.png" mode=""></image>
				<text>帮助中心</text>
			</view>
			<view class="item" @click="bindRefund">
				<image src="../../static/m7.png" mode=""></image>
				<text>退款记录</text>
			</view>
			<view class="item" @click="bindServiceFee">
				<image src="../../static/m8.png" mode=""></image>
				<text>赚服务金</text>
			</view>
			<view class="item" @click="bindOrder2">
				<image src="../../static/t.png" mode=""></image>
				<text>套餐购买记录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
	} from '@dcloudio/uni-app'
	import {
		wxOpenid,
		checkLogin
	} from '@/utils/login-sdk.js'
	import {
		ref
	} from 'vue';
	import {
		getMemberInfoByOpenId
	} from '@/api'
	const isLogin = ref()
	const userData = ref({name:""})
	onShow(async () => {
		const {
			phone
		} = await wxOpenid()
		isLogin.value = phone
		if (isLogin.value) {
			getUserInfo()
		}
	})
	/** 获取会员信息 */
	const getUserInfo = async () => {
		const {
			openId
		} = await wxOpenid()
		const res = await getMemberInfoByOpenId({
			openId
		})
		userData.value = res.result
	}
	/** 我的订单*/
	const bindOrder = (id) => {
		checkLogin(() => {
			uni.navigateTo({
				url: "/pages/order/order?id="+id
			})
		})

	}
	/** 卡券包*/
	const bindCoupon = () => {
		checkLogin(() => {
			uni.navigateTo({
				url: "/pages/coupon/coupon"
			})
		})

	}
	/** 帮助中心*/
	const bindButler = () => {
		checkLogin(() => {
			uni.switchTab({
				url: "/pages/butler/butler"
			})
		})

	}
	/** 退款 */
	const bindRefund = () => {
		checkLogin(() => {
			uni.navigateTo({
				url: "/pages/refund/refund"
			})
		})

	}
	/** 套餐购买记录 */
	const bindOrder2 = ()=>{
		checkLogin(() => {
			uni.navigateTo({
				url: "/pages/order2/order2"
			})
		})
		
	}
	/** 省钱卡套餐 */
	const bindSqktc = () => {
		checkLogin(() => {
			uni.navigateTo({
				url: '/pages/sqktc/sqktc'
			})
		})

	}
	/** 转服务金*/
	const bindServiceFee = () => {
		checkLogin(() => {
			uni.navigateTo({
				url: "/pages/serviceFee/serviceFee"
			})
		})

	}
	/** 修改用户信息*/
	const bindEditUser = () => {
		checkLogin(() => {
			uni.navigateTo({
				url: "/pages/editUser/editUser"
			})
		})

	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B 21%, #F8F5F0 49%) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.user {
		margin-top: 68rpx;
		margin-bottom: 44rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		>image {
			display: block;
			width: 130rpx;
			height: 130rpx;
			margin-bottom: 18rpx;
			border-radius: 50%;

		}

		view {
			display: flex;
			align-items: center;

			text {
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}

			image {
				display: block;
				margin-left: 12rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}

		.btn {
			width: 640rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
			box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
			border-radius: 28rpx;
			margin: 50rpx auto;
			font-weight: bold;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			// 写在需要添加底部边距的盒子上

		}
	}

	.order {
		width: 630rpx;
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 0 auto;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #16191B;
			}

			image {
				display: block;
				width: 38rpx;
				height: 38rpx;
			}
		}

		.list {
			display: flex;
			
			margin-top: 50rpx;
			flex-wrap: wrap;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33%;
				margin-bottom: 30rpx;

				image {
					width: 47rpx;
					height: 47rpx;
					display: block;
					margin-bottom: 16rpx;
				}

				text {
					font-size: 28rpx;
					color: #16191B;
				}
			}
		}
	}

	.sqk {
		width: 702rpx;
		height: 217rpx;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 18rpx auto;
		display: block;
	}
</style>